<template>
  <div id="app">
     <el-row type="flex" class="row-bg" justify="center">
      
    <el-col :span="6" :lg="7" :xl="6">
      <h1>欢迎来到东大星问卷系统 </h1>
      <el-image
        :src="require('@/assets/images/logo.png')"
        style="width: 175px; height: 210px; margin: 0"
      ></el-image>
    </el-col>

    <el-col :span="1" >
      <el-divider direction="vertical"></el-divider>
    </el-col>

    <el-col :span = "6">

      <el-form 
      :model="PhoneFindForm" 
      :rules="rules" 
      ref="PhoneFindForm" 
>
       <h2 style="margin-left: -55%;margin-bottom:-2%"><font size="6px">验证码找回</font></h2>
       <el-form style="margin-bottom: 3%;"
       >
        <router-link to="/login" 
                  style="margin-left:60%">
                  <font size="3px">想起来了？点我登录</font> 
                </router-link>
              </el-form>
        

       <el-form 
       ref="getCodeForm" 
       :rules="getCoderules" 
       :model="getCodeForm">

        <el-form-item prop="phone" style="margin-bottom:5%;">
          <el-input v-model="getCodeForm.phone" 
          style="width:90% ;margin-left:5%;" placeholder="请输入手机号"
          ></el-input>            
        </el-form-item>

        <el-form-item prop="code" style="margin-bottom: 5%;">
          <el-input 
          v-model="getCodeForm.code" 
          style="width:58% ;margin-left: 5%;" placeholder="请输入验证码"
          ></el-input>

          <el-button type="primary"  v-show="show" @click="getCode('getCodeForm')" style="margin-left: ">获取验证码</el-button>
          <el-button type="primary"   v-show="!show" disabled style=" width:32%;margin-left:0"> {{count}} s</el-button>
      </el-form-item>
      </el-form>

      <el-form-item prop="password1" style="margin-bottom: 5%;">
            <el-input v-model="PhoneFindForm.password1" style="width:90%;margin-left: 5%;" placeholder="请输入新密码"></el-input>
          </el-form-item>

          <el-form-item prop="password2" style="margin-bottom: 5%;">
            <el-input v-model="PhoneFindForm.password2" style="width:90%;margin-left: 5%;" placeholder="请确认新密码"></el-input>
          </el-form-item>
     

        <el-form-item>
          <el-button
          type="primary" 
          @click="submitForm('PhoneFindForm')"
          style="width:90%;margin-left: 5%;"
          >确定</el-button>

          <router-link to="/PasswordFind" 
                  style="margin-left: 5%">
                  <font size="3px">手机号忘记？点击密保找回密码</font> 
          </router-link>

        </el-form-item>
      
      </el-form>
    </el-col>
  </el-row>
  </div>
 
</template>

<script>
export default {
  name: "PhoneFind",
  data() {
    return {
      PhoneFindForm: {
        phone: '',
        code:'',
        password1: "",
        password2: "",
      },
     
      getCodeForm:{
          phone: '',
      },

      getCoderules:{
         phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为 11 位数字', trigger: 'blur' }
        ],
      },
        show: true,    
        timer: null,
        count: '',
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为 11 位数字', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "change" },
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.PhoneFindForm.password2 === "") {
                callback(new Error("请再次输入密码"));
              } else if (
                this.PhoneFindForm.password2 != this.PhoneFindForm.password1
              ) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      activeName:'second',
    };
  },
  methods: {
    // 提交登录表单
    submitForm(formName) {

       this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return
        } 

      await this.$http({
        method:"post",
        url:"/identifyTel",
        data:{
          tel:this.PhoneFindForm.phone,
          code:this.getCodeForm.code,
          passwd:this.PhoneFindForm.password1,
        }
      })
        .then((response) => {
          const res= response.data
          //访问后端
          console.log(res.data);

          if (res.code == "666") {
            //访问成功
          this.$message.success(response.message);

          this.$router.push('/login');

          } else {
            //访问失败
          this.$message.error(response.message);

          }
        })
        .catch((error) => {
          // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
          // console.log(error);
          if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("请求未发出", error.message);
          }
        }); 
      });
    },




    handleClick(tab, event) {
      if(this.activeName=="first"){
        this.$router.push('/');
      }else {
        this.$router.push('/Login-Phone');
      }
    },
    
    
// 获取验证码函数
     async getCode(formName) {
      this.PhoneFindForm.phone=this.getCodeForm.phone
       this.$refs[formName].validate(async (valid) => {

        if (!valid) {
          return
        }  
        this.getCodesecond();
        await this.$http({
        method: "get",
        url: "/getCode",
      
        params: {tel:this.PhoneFindForm.phone},
    
      }).then((response) => {

        const res = response.data;
          if(res.code=="666"){
          this.$message.success(res.message)
          }
          else{
            this.$message.error(res.message)

          }
      });
      })},

         getCodesecond(){
            this.show = false;
            const TIME_COUNT = 60;      
            if (!this.timer) {        
                this.count = TIME_COUNT;        
                this.show = false;        
                this.timer = setInterval(() => {        
                    if (this.count > 0 && this.count <= TIME_COUNT) {          
                        this.count--;         
                    } else {          
                        this.show = true;          
                        clearInterval(this.timer);          
                        this.timer = null;         
                    }        
                }, 1000)       
            }    
        } 
  }

}
</script>

<style scoped>

.el-row {
  height: 100vh;
  display: flex;
  align-items: center;
}
.el-divider {
  height: 200px;
}
#app {
  background-image: url("@/assets/images/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}
  .button{
    width:320px;
    height: 40px;
    margin-left: -95px;
    text-align: center;
  }


</style>